import 'package:bpb/custom_widget/chart/blood_chart.dart';
import 'package:bpb/framework/base/base_page.dart';
import 'package:bpb/framework/custom/ext_widget/widget_util.dart';
import 'package:bpb/framework/ext_dart/map_ext.dart';
import 'package:bpb/framework/utils/sized_box_util.dart';
import 'package:bpb/pages/history/history_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../routers/routers.dart';

class HistoryPage extends BasePage<HistoryController> {



  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Color(0xffF5F3F1),
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        title: Text("Data Trend", style: GoogleFonts.poppins(fontSize: 16.sp, fontWeight: FontWeight.w500, color: Colors.black)),
      ),
      body: Column(
        children: [
          Obx(() {
            List<Widget> items =
                controller.tabs.value.map((e) {
                  bool checked = e["checked"] as bool;
                  return Container(
                    padding: EdgeInsets.only(left: 10.w, right: 10.w, top: 5.h, bottom: 5.h),
                    decoration: BoxDecoration(
                      // #5DB07526
                      color: checked ? Color(0x265DB075) : Colors.transparent,
                      borderRadius: BorderRadius.circular(16.r),
                    ),
                    child: Text(
                      "${e["name"]}",
                      style: GoogleFonts.poppins(fontWeight: FontWeight.w400, fontSize: 14.sp, color: checked ? Color(0xff2F825E) : Colors.black),
                    ),
                  ).prop(
                    onTap: () {
                      for (var eee in controller.tabs) {
                        if (eee == e) {
                          eee["checked"] = true;
                        } else {
                          eee["checked"] = false;
                        }
                      }
                      controller.tabs.value = List.of(controller.tabs);
                      controller.onTabChecked();
                    },
                  );
                }).toList();
            return Container(margin: EdgeInsets.only(left: 60.w, right: 60.w), child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: items));
          }),
          Divider(),
          Container(
            width: double.infinity,
            height: 60.h,
            margin: EdgeInsets.only(left: 50.w, right: 50.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Obx(() {
                  return Offstage(
                    offstage: !controller.visibleSwitchTime.value,
                    child: Icon(Icons.keyboard_arrow_left_outlined, size: 30.w, color: Color(0xff292D32)).prop(
                      onTap: () {
                        controller.onPreClick();
                      },
                    ),
                  );
                }),

                Obx(() {
                  return Text(
                    "${controller.dateTitleFromToEnd.value}",
                    style: GoogleFonts.poppins(fontWeight: FontWeight.w400, color: Colors.black, fontSize: 14.sp),
                  );
                }),

                Obx(() {
                  return Offstage(
                    offstage: !controller.visibleSwitchTime.value,
                    child: Icon(Icons.keyboard_arrow_right_outlined, size: 30.w, color: Color(0xff292D32)).prop(
                      onTap: () {
                        controller.onNextClick();
                      },
                    ),
                  );
                }),
              ],
            ),
          ),

          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  ConstrainedBox(
                    constraints: BoxConstraints(minHeight: 278.h, maxHeight: 300.h),
                    child: Container(
                      width: double.infinity,
                      margin: EdgeInsets.only(left: 15.w, right: 15.w),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15.r),
                        color: Colors.white,
                        boxShadow: [BoxShadow(color: Colors.black.withAlpha(100), offset: Offset(3, 3), blurRadius: 5.r)],
                      ),
                      child: Column(
                        children: [
                          sb.h(15.h),
                          Container(
                            margin: EdgeInsets.only(left: 24.w, right: 24.w),
                            child: Row(
                              children: [
                                Text("BP Trend", style: GoogleFonts.poppins(fontSize: 16.sp, fontWeight: FontWeight.w500, color: Colors.black)),
                                Spacer(),
                                Row(children: [Text("All records",style: GoogleFonts.poppins(
                                  fontWeight: FontWeight.w400,
                                  fontSize: 12.sp
                                ),), Icon(Icons.keyboard_arrow_right_rounded)]).prop(onTap: (){
                                  debugPrint("all record--->");
                                  Get.toNamed(AppPage.ROUTER_ALL);
                                }),
                              ],
                            ),
                          ),
                          sb.h(8.h),
                          Container(
                            margin: EdgeInsets.only(left: 24.w, right: 24.w),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                Obx(() {
                                  return Text(
                                    "${controller.datas.length}",
                                    style: GoogleFonts.poppins(fontSize: 30.sp, fontWeight: FontWeight.w500, color: Colors.black),
                                  );
                                }),

                                Text(" records", style: GoogleFonts.poppins(fontSize: 14.sp, fontWeight: FontWeight.w400, color: Colors.black)),
                              ],
                            ),
                          ),
                          sb.h(15.h),
                          Expanded(
                            child: Obx(() {
                              String dataType = controller.getDatType();
                              return Container(
                                margin: EdgeInsets.only(left: 16.w),
                                child: BloodChart(dataType: dataType, dateList: controller.datas, lengends: controller.lengends),
                              );
                            }),
                          ),
                          Container(
                            width: double.infinity,
                            height: 50.h,
                            child: Obx(() {
                              var widgets =
                                  controller.lengends.value.map((e) {
                                    return Row(
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      children: [
                                        SizedBox(width: 3.w),
                                        if (e['checked'] == true) Image.asset("${e['icon']}") else Opacity(opacity: 0.2, child: Image.asset("${e['icon']}")),
                                        SizedBox(width: 4.w),
                                        Text(
                                          "${e['title']}",
                                          style: GoogleFonts.poppins(fontSize: 12.sp, fontWeight: FontWeight.w400, color: const Color(0xB284879D)),
                                        ),
                                        SizedBox(width: 3.w),
                                      ],
                                    ).prop(
                                      onTap: () {
                                        for (var ex in controller.lengends) {
                                          if (ex == e) {
                                            ex['checked'] = !(ex['checked'] as bool);
                                            break;
                                          }
                                        }
                                        controller.lengends.value = List.of(controller.lengends.value);
                                      },
                                    );
                                  }).toList();

                              ///图例
                              return Container(
                                margin: EdgeInsets.only(left: 3.w, right: 3.w),
                                width: double.infinity,
                                alignment: Alignment.center,
                                height: 18.h,
                                child: Row(mainAxisAlignment: MainAxisAlignment.center, children: widgets),
                              );
                            }),
                          ),
                        ],
                      ),
                    ),
                  ),
                  sb.h(15.h),
                  Column(
                    children: [

                      Obx(() {
                        List<Widget> items =
                            controller.rangeDatas.value.map((e) {

                              String title = e["title"] as String;
                              return Expanded(
                                flex: 1,
                                child: Container(
                                  margin: EdgeInsets.only(left: e["margin"] as double, right: e["margin"] as double),
                                  decoration: BoxDecoration(borderRadius: BorderRadius.circular(15.r), color: Colors.white),
                                  padding: EdgeInsets.only(left: 15.w, top: 5.h, bottom: 5.h),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text("${title}", style: GoogleFonts.poppins(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Color(0xff181920))),
                                      Text("${e["min"]}-${e["max"]}", style: GoogleFonts.poppins(fontSize: 16.sp, fontWeight: FontWeight.w600, color: Color(0xff181920))),
                                      Text("${e["unit"]}", style: GoogleFonts.poppins(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Color(0x80181920))),
                                    ],
                                  ),
                                ),
                              );
                            }).toList();

                        return Container(
                          margin: EdgeInsets.only(left: 15.w, right: 15.w),
                          child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: items),
                        );
                      }),

                      ConstrainedBox(
                        constraints: BoxConstraints(minHeight: 70.h, maxHeight: 180.h),
                        child: Container(
                          margin: EdgeInsets.only(left: 15.w, right: 15.w, top: 15.h, bottom: 15.h),
                          width: double.infinity,
                          padding: EdgeInsets.all(15.w),
                          decoration: BoxDecoration(borderRadius: BorderRadius.circular(12.r), color: Colors.white),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              Row(
                                children: [

                                  Text("Average", style: GoogleFonts.poppins(fontWeight: FontWeight.w500, color: Color(0xff181920), fontSize: 16.sp)),
                                  Spacer(),

                                  Offstage(
                                    offstage: true,// 规避审核
                                    child: Obx((){
                                      return Container(
                                        padding: EdgeInsets.only(left: 15.w,right: 15.w,top: 5.h,bottom: 5.h),
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.all(Radius.circular(15.r)),
                                          color: controller.avgData.value["bgColor"] as Color
                                        ),
                                          child: Row(
                                            children: [

                                              ClipOval(
                                                child: Container(
                                                  width: 6.w,
                                                  height: 6.w,
                                                  color: controller.avgData.value["textColor"] as Color
                                                ),
                                              ),

                                              sb.w(5.w),
                                              Text("${controller.avgData.value.nn("avgLevel")}",style: GoogleFonts.poppins(
                                                fontSize: 14.sp,
                                                fontWeight: FontWeight.w500,
                                                color: controller.avgData.value["textColor"] as Color
                                              ),),
                                            ],
                                          ));
                                    }),
                                  ),

                                ],
                              ),

                              sb.h(15.h),

                              Row(
                                children: [
                                  Expanded(
                                    flex: 3,
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Text("SYS/DIA", style: GoogleFonts.poppins(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Color(0xff181920))),
                                        Row(
                                          crossAxisAlignment: CrossAxisAlignment.end,
                                          children: [
                                            Obx(() {
                                              return Text(
                                                "${controller.avgData.value["avgSys"].toString() + "/" + controller.avgData.value["avgDia"].toString()}",
                                                style: GoogleFonts.poppins(fontWeight: FontWeight.w600, fontSize: 28.sp, color: Color(0xff181920)),
                                              );
                                            }),
                                            sb.w(5.w),
                                            Text(
                                              "mmhg",
                                              style: GoogleFonts.poppins(fontSize: 12.sp, fontWeight: FontWeight.w400, color: Color(0xff181920), height: 2.5),
                                            ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                  sb.w(30.w),
                                  Expanded(
                                    flex: 2,
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Text("Pulse", style: GoogleFonts.poppins(fontSize: 12.sp, fontWeight: FontWeight.w500, color: Color(0xff181920))),

                                        Row(
                                          crossAxisAlignment: CrossAxisAlignment.end,
                                          children: [
                                            Obx(() {
                                              return Text(
                                                "${controller.avgData.value["avgPulse"]}",
                                                style: GoogleFonts.poppins(fontWeight: FontWeight.w600, fontSize: 28.sp, color: Color(0xff181920)),
                                              );
                                            }),

                                            sb.w(10.w),
                                            Text(
                                              "bpm",
                                              style: GoogleFonts.poppins(fontSize: 12.sp, fontWeight: FontWeight.w400, height: 2.5, color: Color(0xff181920)),
                                            ),

                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                  sb.h(80.h),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
